<template>
	<view class="buy-box">
		<view class="box-list" v-for="(item,index) in list" :key="index">
			<view class="box-list-head flex">
				<image :src="item.avatar" mode=""></image>
				<view class="head-user-info">
					<text>{{item.nickname}}</text>
					<text>{{item.addTime}}</text>
				</view>
			</view>
			<view class="info-box">
				<view class="triangle"></view>
				<view class="info-con">{{item.desc}}</view>
			</view>
			<view class="line" v-if="item.replys.length>0"></view>
			<view class="store-box">
				<view class="store-list flex" v-for="(storeItem,storeIndex) in item.replys" :key="storeIndex">
					<image :src="storeItem.picUrl" mode="" class="store-logo"></image>
					<view class="store-info flex1">
						<view class="store-name flex flai fljcsb">
							<text class="name flex1">{{storeItem.merchantName}}</text>
							<view class="look" @click="showPopupHand(storeIndex,index)">
								<view class="point" >
									<text></text>
									<text></text>
									<text></text>
								</view>
							</view>
							
						</view>
						<view class="time">{{storeItem.replyTime}}</view>
						<view class="remark">{{storeItem.desc}}</view>
					</view>
				</view>
			</view>
		</view>
		<vant-popup :show="showPopup" round position="bottom" custom-style="width: 100%;height:306rpx">
			<view class="popu">
				<view class="popu-list" @click="copyWx">复制微信</view>
				<view class="popu-list" @click="call">呼叫</view>
				<view class="popu-list" @click="cancel">取消</view>
			</view>
		</vant-popup>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default:function(){
					return []
				}
			}
		},
		data () {
			return {
				showPopup:false,
				info:{}
			}
		},
		methods:{
			// 复制微信
			copyWx() {
				uni.setClipboardData({
					data: this.info.wechatName,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			},
			
			call() {
				uni.makePhoneCall({
					phoneNumber: this.info.contactPhone
				});
			},
			//取消
			cancel () {
				this.showPopup = false
			},
			showPopupHand (secondIndex,index) {
				console.log(index)
				console.log(this.list)
				this.info = {
					contactPhone:this.list[index].replys[secondIndex].contactPhone,
					wechatName:this.list[index].replys[secondIndex].wechatName
				}
				this.showPopup = true
			}
		}
	}
</script>

<style>
	.buy-box {
		width: 702rpx;
		margin: 24rpx auto;
	}

	.box-list {
		width: 702rpx;
		min-height: 200rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		padding: 24rpx 30rpx;
		box-sizing: border-box;

	}
	.box-list-head image {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	.head-user-info text{
		display: block;
	}
	.head-user-info text:nth-child(1) {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 6rpx;

	}
	.head-user-info text:nth-child(2) {
		font-size: 24rpx;
		color: #999999;
	}
	.triangle {
		width: 0;
		height: 0;
		border: 16rpx solid transparent;
		border-bottom-color: #F7F8F9 ;
		margin-left: 20rpx;
	}
	.info-con {
		padding: 20rpx;
		box-sizing: border-box;
		min-height: 80rpx;
		font-size: 28rpx;
		background-color: #F7F8F9;
		border-radius: 10rpx;
	}
	.line {
		border-bottom: 1px solid #E5E5E5;
		height: 24rpx;
		margin-bottom: 13rpx;
	}
	.store-list {
		padding: 13rpx 0;
		box-sizing: border-box;
	}
	.store-list .store-logo {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	.store-list .store-name text.name {
		color: #666666;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	.store-list .store-name .point {
		width: 6px;
		margin-left: 74rpx;
		margin-top: 24rpx;
	}
	.store-list .store-name .point text {
		display: block;
		width: 6rpx;
		height: 6rpx;
		background: #666666;
		border-radius: 50%;
		margin-bottom: 6rpx;
	}
	.store-list .time {
		font-size: 24rpx;
		color: #999999;
		margin-bottom: 16rpx;
	}
	.store-list .remark {
		color: #333333;
		font-size: 28rpx;
		border-bottom: 1px solid #E5E5E5;
		padding-bottom: 24rpx;
	}
	.store-list:last-of-type .remark {
		border-bottom: 0;
	}
	.popu-list{
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
		padding: 0 30rpx;
	}
	.popu-list:nth-child(1) {
		border-bottom: 2rpx solid #F2F2F2;
	}
	.popu-list:nth-child(2) {
		border-bottom: 24rpx solid rgba(234, 234, 234, .6);
	}
	.popu-list:active {
		background-color: rgba(234, 234, 234, .2);
	}
	.look {
		width: 80rpx;
		height: 90rpx;
		margin-left: 24rpx;

	}
</style>
